<template>
  <div>
      <div class="wrap">
        <h2>state</h2>
        <p>a:{{ $store.state.a }}</p>
        <p>b:{{ $store.state.b }}</p>
      </div>

      <div class="wrap">
        <h2>getters</h2>
        <p>2a:{{ $store.getters.doubleA }}</p>
        <p>2b:{{ $store.getters.doubleB }}</p>
        <p>2(a+b):{{ $store.getters.doubleAB }}</p>
      </div>

      <div class="wrap">
        <h2>mutations</h2>
        <p>
        <button @click="$store.commit('addA')">a++</button>
        <button @click="$store.commit('addA_N',10)">a+10</button>
        </p>
        <p><button  @click="$store.commit('addB')">b++</button></p>
      </div>


      <div class="wrap">
        <h2>actions</h2>

        <!-- 不考虑 异步操作是否结束 -->
        <p>
            <button @click="$store.dispatch('addA_Async')">a++</button>
            <button @click="$store.dispatch('addAN_Async',10)">a+10</button>   
        </p>
        <p><button  @click="$store.dispatch('addB_Async')">b++</button></p>
        <!-- 考虑 异步操作是否结束(Promise状态改变) -->
        <p>
          <button  @click="addBoth">先加a,在加b</button>
          <button  @click="$store.dispatch('addAB_Async')">先加a,在加b</button>
        </p>
      </div>
  </div>
</template>

<script>
  export default {
      methods:{
        addBoth(){
          this.$store.dispatch('addA_Async').then(()=>{
            console.log("a++完毕");
            return this.$store.dispatch('addB_Async');  // 如果then方法返回值也是一个Promise实例,等Promise实例状态改变之后,在向后传递
          }).then(()=>{
            console.log("b++完毕");
          }).catch(err=>{
            console.log("发生错误",err)
          })
        }
      },
      mounted(){
        console.log("store",this.$store);
      }
  }
</script>

<style  scoped>
.wrap{
  padding: 5px;
  border:1px dashed #333;
  margin: 5px;
}
</style>